<template>
  <view>
    <view class="app-content">
      <image mode="'widthFix'" src="@/static/images/banner.jpg"></image>
      <uni-title :title="appBaseInfo.SITE_TITLE" />
      <uni-title :title="appBaseInfo.GROUP_SITE_TITLE" />
      <uni-title :title="appBaseInfo.IS_HIDE_SENSITIVE_INFORMATION" />
      <uni-title :title="appBaseInfo.SITE_COPYRIGHT" />
      <uni-title :title="appBaseInfo.SITE_NAME" />
      <uni-card>
        <text>
          这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。
        </text>
      </uni-card>
      <uni-badge size="small" :text="count" absolute="rightTop" type="primary">
        <button type="default" @click="AddCount">右上</button>
      </uni-badge>
    </view>
    <template>
      <view class="">
        <uni-forms
          :modelValue="formData"
          ref="valiForm"
          :rules="rules"
          lable-width="200px">
          <uni-forms-item label="姓名：" name="name" required>
            <uni-easyinput
              type="text"
              v-model="formData.name"
              placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="年龄：" name="age">
            <input
              type="text"
              v-model="formData.age"
              placeholder="请输入年龄" />
          </uni-forms-item>
          <uni-forms-item required name="hobby" label="兴趣爱好：">
            <uni-data-checkbox
              multiple
              v-model="formData.hobby"
              :localdata="hobby" />
          </uni-forms-item>

          <uni-forms-item required name="select" label="选择：">
            <uni-data-select
              v-model="formData.select"
              :localdata="hobby"></uni-data-select>
          </uni-forms-item>
        </uni-forms>
        <button @click="submitForm">Submit</button>
      </view>
    </template>
  </view>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { useUserStore } from "@/stores";
import { reactive, ref, unref } from "vue";
import banner from "@/static/images/banner.jpg";
const userStore = useUserStore();
const { appBaseInfo } = storeToRefs(userStore);
console.log(appBaseInfo);

const count = ref(2);
const AddCount = () => {
  count.value++;
  console.log(count.value);
};

const hobby = [
  { value: "bj", text: "北京" },
  { value: "sh", text: "上海" },
  { value: "gz", text: "广州" },
];

const formData = reactive({
  name: "",
  age: "",
  hobby: "",
  select: "",
});

const rules = reactive({
  name: {
    rules: [
      {
        required: true,
        errorMessage: "请填写姓名",
      },
    ],
  },
});

const valiForm = ref(null);
const submitForm = (e) => {
  valiForm.value
    .validate()
    .then((res) => {
      console.log("success", res);
      uni.showToast({
        title: `校验通过`,
      });
    })
    .catch((err) => {
      console.log("err", err);
    });
};

const jumpRouteClick = () => {
  uni.switchTab({
    url: "/pages/home/index",
  });
};
</script>

<style lang="scss" scoped>
.app-content {
  padding: 16rpx;
}
</style>
